<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>谷歌地图API示例: 实时交通叠加层</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA91OZMiOe8VfhdtstxQrBBxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhToKuCkHwzulUTwzU6LJb92tmbOKA" 
            type="text/javascript"></script>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, sans serif;
        font-size: 13px;
        margin: 2px;
      }
      table.directions th {
        background-color:#EEEEEE;
      }
      img {
        color: #000000;
      }
    </style>
    <script type="text/javascript">
    var map;
    var trafficInfo;
    var toggleState = 1;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas")); 
        map.setCenter(new GLatLng(39.9056,116.3958), 12);
        map.setUIToDefault();
        var trafficOptions = {incidents:true};
        trafficInfo = new GTrafficOverlay(trafficOptions);
        map.addOverlay(trafficInfo);
      }
    }
    
    function toggleTraffic() {
      if (toggleState == 1) {
        map.removeOverlay(trafficInfo);
        toggleState = 0;
      } else {
        map.addOverlay(trafficInfo);
        toggleState = 1;
      }
    }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
  <h2>谷歌地图API实时交通叠加层演示</h2>
  <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div> 
    <br clear="all"/> 
    <br/> 
    <input type="button" value="实时交通切换" onClick="toggleTraffic();"/> 
    <br/>  
  </body>
  
</html>
